<template>
  <div class="ulwrapper">
    <van-radio-group v-model="uid">
      <van-cell-group>
        <div class="weui-cells__title">在线</div>
        <van-cell
          v-for="item in userDataOnline"
          clickable
          :key="item.id"
          @click="selectPrincipal(item)"
        >
          <template slot="title">
            <van-radio :name="item.id">
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" :src="item.tx" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">{{item.name}}</h4>
                  <p class="weui-media-box__desc">{{item.role}}</p>
                </div>
              </a>
            </van-radio>
          </template>
        </van-cell>

        <div class="weui-cells__title">不在线</div>
        <van-cell
          v-for="item in userDataOffline"
          clickable
          :key="item.id"
          @click="selectPrincipal(item)"
        >
          <template slot="title">
            <van-radio :name="item.id">
              <a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
                <div class="weui-media-box__hd">
                  <img class="weui-media-box__thumb" :src="item.tx" alt="">
                </div>
                <div class="weui-media-box__bd">
                  <h4 class="weui-media-box__title">{{item.name}}</h4>
                  <p class="weui-media-box__desc">{{item.role}}</p>
                </div>
              </a>
            </van-radio>
          </template>
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>
</template>

<script>
export default {
  name: 'UserList',
  data () {
    return {
      // txsrc: require('imgs/头像.png'),
      uid: localStorage.principalUID ? localStorage.principalUID : '',
      userDataOnline: [],
      userDataOffline: []
    }
  },
  mounted () {
    this.cm.overscroll(document.querySelector('.ulwrapper'))
    this.getData()
  },
  methods: {
    getData () {
      let curday = new Date()
      let datestr = curday.getFullYear() + '-' + this.cm.dealnum(curday.getMonth() + 1) + '-' + this.cm.dealnum(curday.getDate())

      this.cm.myajax('/userInfo/work/getUserList', {
        dateValue: datestr
      }, (data) => {
        for (let i = 0; i < data.userWorkList.length; i++) {
          const ele = data.userWorkList[i]
          let obj = {
            id: ele.userId,
            name: ele.name,
            tx: this.cm.getAvatar(ele.avatarUrl),
            role: ele.roleValues,
            wtype: ele.workType ? ele.workType : '放假',
            wid: ele.workId
          }
          if (ele.isOnline === '1') {
            this.userDataOnline.push(obj)
          } else {
            this.userDataOffline.push(obj)
          }
        }

        // if (this.userDataOnline.length > 0) this.uid = this.userDataOnline[0].id
        // else if (this.userDataOffline.length > 0) this.uid = this.userDataOffline[0].id
      })
    },
    selectPrincipal (item) {
      if (item.id === localStorage.principalUID) {
        this.uid = ''
        localStorage.principalUName = ''
        localStorage.principalUID = ''
      } else {
        localStorage.principalUName = item.name
        localStorage.principalUID = item.id
      }

      setTimeout(() => {
        this.$router.push('/reportinfo/' + localStorage.reporttype)
      }, 500)
    }
  }
}
</script>

<style lang="stylus" scoped>
.ulwrapper
  height: calc(100vh)
.weui-cells__title
  background #F9F9F9
  margin-top 0
  padding-top .77em

.weui-media-box_appmsg
  padding 0
  .weui-media-box__bd
    .weui-media-box__desc
      margin-top 4px
</style>
